﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/js/jquery.min.js"></script>
    <script src="~/Scripts/js/bootstrap.min.js"></script>
    <style>
        ul li {
            float: left;
            color: #ffffff;
            margin-right: 12px;
        }

        ul {
            list-style: none;
            margin-left: -60px;
            margin-top: -5px;
            opacity: 0.5;
        }
    </style>
</head>
<body style="background-image:url(/Content/image/003681271.jpg);background-repeat:no-repeat">
    <div id="head" style="height:53px;"></div>
    <div class="container" style="margin-top:7%;">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div style="margin-left:50px;">
                    <span style="font-size:16px;color:#fff;font-family:MV Boli;margin-bottom:-5px;padding-left:20px;opacity:0.5">Login system center</span>
                    <h1 style="font-family:Microsoft Tai Le;color:#ffffff;margin-top:5px;">登录系统中心</h1>
                    <ul><li>boss</li><li>|</li><li>管理</li><li>|</li><li>后台</li><li>|</li><li>前台</li><li>|</li><li>手机端</li></ul>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:50px;">
            <div class="col-md-3 col-md-offset-2">
                <div class="input-group" style="float:left">
                    <span class="input-group-addon" style="background-color:#223033;color:#fff;height:20px;">账号</span>
                    <input id="Account" type="text" class="form-control" placeholder="账号或用户名" style="background-color:#223033;color:#fff;height:30px;width:200px;">
                    <div style="width:15px;height:2px;background-color:#fff;"></div>
                </div>
            </div>
            <div class="col-md-2">
                <img src="~/Content/image/Head.png" style="margin:0 auto;" />
            </div>
            <div class="col-md-3" style="margin-left:-30px;">
                <div class="input-group">
                    <span class="input-group-addon" style="background-color:#223033;color:#fff;height:20px;">密码</span>
                    <input id="Password" type="password" class="form-control" placeholder="请输入密码" style="background-color:#223033;color:#fff;height:30px;width:200px;">
                    <div style="width:15px;height:2px;background-color:#fff;"></div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:60px;">
            <div class="col-md-4 col-md-offset-4">
                <input type="button" value="登录" style="background-color:#ed362e;width:124px;height:50px;border:1px solid #ed362e;color:#fff;font-size:18px;border-radius:5px;" onclick="FunLogin()" />
                <input type="button" value="注册" style="background-color:#ed362e;margin-left:60px;width:124px;height:50px;border:1px solid #ed362e;color:#fff;font-size:18px;border-radius:5px;" onclick="location.href='/Home/Register'" />
            </div>
        </div>

    </div>
</body>
</html>
<script>
    $("#Account").focus(function () {
        var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>提示！</strong>请输入账号或用户名。</div>';
        $("#head").html(alert);
    })

    $("#Account").blur(function () {
        $("#myAlert").remove();
        var Account = $("#Account").val();
        if (Account == "") {
            var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>警告！</strong>请输入账号或用户名。</div>';
            $("#head").html(alert);
            return;
        }
        else {
            $("#myAlert").remove();
        }
    })


    $("#Password").focus(function () {
        var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>提示！</strong>请输入字母开头6-18位字母数字下划线组成的密码。</div>';
        $("#head").html(alert);
    })

    $("#Password").blur(function () {
        $("#myAlert").remove();

        var Password = $("#Password").val();
        if (Password == "") {
            var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>警告！</strong>请输入密码。</div>';
            $("#head").html(alert);
            return;
        }
        else {
            $("#myAlert").remove();
        }
    })


    //登录
    function FunLogin() {
        var Account = $("#Account").val();
        var Password = $("#Password").val();

        if (Account == "") {
            $("#myAlert").remove();
            var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>警告！</strong>请输入账号或用户名。</div>';
            $("#head").html(alert);
            return;
        }
        else {
            $("#myAlert").remove();
        }

        if (Password == "") {
            $("#myAlert").remove();
            var alert = '<div id="myAlert" class="alert alert-warning"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>警告！</strong>请输入密码。</div>';
            $("#head").html(alert);
            return;
        }
        else {
            $("#myAlert").remove();
        }

        $.ajax({
            type: "Post",
            url: "/Employee/LoginDo",
            data: { Account: Account, Password: Password },
            success: function (obj) {
                if (obj >0) {
                    location.href = '/Employee/Index';
                }
                else {
                    $("#myAlert").remove();
                    var alert = '<div id="myAlert" class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a><strong>错误！</strong>用户名或密码错误。</div>';
                    $("#head").html(alert);
                }
            }
        })

    }

</script>